<template>

  <div class="tab_content">
    <div class="tab_title_top flex">
      <span class="name_title">'{{userViewList[0]?.userInfo.nickname }}' 相关主播</span>
      <span class="more"  @click="emits('update:modelValue', 3)">更多 ></span>
    </div>
    <!-- 轮播学堂图 -->
    <van-swipe :loop="false" :width="115" class="swiper" :show-indicators="false">
  <van-swipe-item class="flex smallPic" v-for="item in userViewList" :key="item.statCountInfo.id">
    <img :src="item.userInfo?.smallPic" alt="">
    <div class="intro ">
      <div class="mi_small">{{ item.userInfo?.nickname }}</div>
      <div class="num">{{ (item.userInfo?.followers_counts/10000).toFixed(2) }}万</div>
    </div>
  </van-swipe-item>
  
   </van-swipe> 
   <div class="card_list">
    <div class="card_top flex">
      <span class="card_title">'{{ userViewList[0]?.userInfo.nickname  }}'相关的专辑</span>
      <span class="more"  @click="emits('update:modelValue', 1)">更多 ></span>
    </div>
    <div class="card_content ">
      <div class="card_item flex" v-for="item in albumList" :key="item.albumInfo.id">
      <img :src="item.albumInfo.cover_path" alt="">
      <div class="card_info flex_c">
        <div>{{ item.albumInfo.title }}</div>
        <div class="info_center ">{{ item.albumInfo.recommend_reason||item.albumInfo.intro }}</div>
        <div class="info_footer">
          <span class="QM">{{ item.albumInfo.nickname }}</span>
          <span class="lins">{{ item.albumInfo.tracks }}</span>
          <span class="pop">{{(item.albumInfo.play/10000)?.toFixed(2)}}万</span>
        </div>
      </div>
    </div>
    
    </div>
   </div>
   <div class="radio_list">
    <div class="card_top flex">
      <span class="card_title">'{{ userViewList[0]?.userInfo.nickname }}'相关的声音</span>
      <span class="more"  @click="emits('update:modelValue', 2)">更多 ></span>
    </div>
    <div class="radio_content">
      <div class="radio_item flex" v-for="item in trackList" :key="item.pageUriInfo.id">
        <img :src="item.trackInfo.cover_path" alt="">
        <div class="radio_info flex_c">
          <div class="radio_info_title">{{ item.trackInfo.title }}</div>
          <div class="radio_footer">
            <span class="name">{{ item.trackInfo.nickname }}</span>
            <span class="time">{{ item.trackInfo.count_share }}</span>
            <span class="bf">{{ moment(item.trackInfo.updated_at).format('hh:mm')  }}</span>
          </div>
        </div>
      </div>
    </div>
   </div>
   <!-- 底部 -->
   <div class="footer">
    <img class="bigImg" src="https://imagev2.xmcdn.com/storages/2165-audiofreehighqps/52/6D/GKwRIDoF6Ml9AAESnAEaI6xF.png!magick=webp" alt="">
    <img class="footer_img" src="https://imagev2.xmcdn.com/storages/72b6-audiofreehighqps/30/CE/GMCoOR8H3gffAAAQWAIAHhDF.png!magick=webp" alt="">
    <div class="xm">© 2014-2023 喜马拉雅 版权所有</div>

   </div>

  </div>
    
</template>

<script setup lang="ts">
const props=defineProps(['userViewList','albumList','trackList'])
import moment from 'moment';
const emits =defineEmits< {
    (e: 'update:modelValue', value: number): void
}>()

</script>

<style lang="less" scoped>
 .tab_content{
    .more{
      font-size: 14px;
      color: #ABABAB;
      width: 72px;
      height: 38px;
      line-height: 38px;

    }
    .card_top{
      
      margin-left: 30px;
      justify-content: space-between;
      align-items: center;
      .card_title{
        font-size: 18px;
        color:#40404c;

      }

    }

    .tab_title_top{
      justify-content: space-between;
      padding: 15px 0px 0px;
      border-top: 1px solid #ABABAB;
      margin-left: 30px;
      margin-bottom: 15px;
      align-items: center;
      .name_title{
      font-size: 18px;  
      width: 180px;
      color: #40404c;
    }
    
    }
    .swiper{
      margin: 15px 15px 0px;
      .smallPic{
        width: 115px;
        margin-right: 30px;
        align-items: center;
        img{
          width: 40px;
          height: 40px;
          margin-right: 5px;
          border-radius: 50px;
        }
        .intro{
          align-items: center;
          text-align: left;
          height: 40px;
          color: #40404c;
          .mi_small{
            
            font-size: 14px;
            overflow: hidden;
            white-space: nowrap;
            
            height: 24px;
          }
          .num{
            font-size: 12px;
            margin-top: 3px;
            white-space: nowrap;
            color: #ccc;
            &::before{
              content:'\e606';
              font-family: 'iconfont';
              margin-right: 3px;
              font-size: 14px;
              
            }
          }
        }
      }

    }
   .card_list{
   padding: 20px 0px 0px;
    
    .card_content{
      padding-left: 20px;
      .card_item{
       
        padding: 15px 10px 15px 0px;
       border-bottom: 1px solid #e8e8e8;
        
  
        img{
          width: 75px;
          height: 70px;
  
        }
        .card_info{
         margin-left: 10px;
          width: 265px;
          div{
            color: #333333;
            font-size: 16px;
          }
          .info_center{
            color: #9999;
            font-size: 13px;
            margin: 5px 0px 2px;
            // height: 18px;
            line-height: 18px;
          }
          .info_footer{
            font-size: 11px;
            height: 18px;
            line-height: 18px;
            padding-top: 10px;
            span{
              
              color: #999999;
            }
            .QM{
              margin-right: 16px;
             &::before{
                content: '\e606';
                font-family: 'iconfont';
                margin-right: 3px;
              }
            }
            .lins{
              margin-right: 16px;
             &::before{
                content: '\e682';
                font-family: 'iconfont';
                margin-right: 3px;
              }
            }
              .pop::before{
                content: '\e608';
                font-family: 'iconfont';
                margin-right: 3px;
              }
  
          }
        }
  
      }

    }

   }
   .radio_list{
    padding: 20px 0px 0px;
    .radio_content{
      margin-left: 20px;
      .radio_item{
        padding: 15px 10px 15px 0px;
       border-bottom: 1px solid #e8e8e8;
        img{
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
        .radio_info{
          margin-left: 10px;
          height: 50px;
          justify-content: space-between;
          .radio_info_title{
            font-size: 16px;
            // height: 22px;
            line-height: 20px;
            color: #40404c;
            margin: 0px 0px 5px;
          }
          .radio_footer{
            height: 18px;
            font-size: 12px;
            span{
              margin-right: 15px;
              color: #999999;
            }
            .name::before{
              
                content: '\e606';
                font-family: 'iconfont';
                margin-right: 3px;
              
            }
            .time::before{
              
              content: '\e654';
              font-family: 'iconfont';
              font-size: 14px;
              margin-right: 3px;
            
            }
            .bf::before{
              
              content: '\e65b';
              font-family: 'iconfont';
              margin-right: 3px;
            
            }
          }
        }
      }
    }

   }

    .one{
      font-size: 18px;
      color: #40404c;
    }
    .tabs_title{
      margin-top: 50px;
      font-size: 18px;
    }
    .footer{
      position: relative;
      width: 100%;
      height: 180px;
      border-top: 1px solid #fff;
      text-align: center;
     .bigImg{
      position: absolute;
      top:0;
      left: 0;

      width: 100%;
      height: 180px;
      z-index: -1;

     }
     .footer_img{
      width: 102px;
      height: 36px;
      margin: 34px 0px 0px;

     }
     .xm{
      margin: 5px 0px;
      font-size: 12px;
      height: 16px;
      line-height: 16px;
      color: #808080;
     }
     
    }
  }

</style>